<script setup lang="ts">
import { computed, watch } from 'vue';
import { IconInput, FontList } from './useIcon'
const props = defineProps<{ type?: keyof IconInput }>()
const fontFamily = computed(() => {
    const val = props.type || "Origin"
    return FontList.find(i => i.tag === val)?.fontFamily
})
</script>

<script lang="ts">
export { useIcon } from './useIcon'
</script>

<template>
    <span
        class="flex justify-center text-center items-center google-icon"
        :style="{ fontFamily: fontFamily }"
    >
        <slot></slot>
    </span>
</template>

<style scoped>
.google-icon {
    user-select: none;
    cursor: pointer;
    font-family: "Courier New", Courier, monospace;
    line-height: 1em;
}
</style>
